<template>
  <div class="contestant-profile">
    <el-card class="profile-card">
      <div slot="header" class="card-header">
        <span>参赛者个人资料</span>
        <el-button 
          type="primary" 
          size="small" 
          @click="editMode = !editMode" 
          style="float: right;"
        >
          {{ editMode ? '取消' : '编辑资料' }}
        </el-button>
      </div>
      
      <el-form ref="profileForm" :model="profileForm" :rules="rules" label-width="100px" :disabled="!editMode">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="profileForm.username" disabled></el-input>
        </el-form-item>
        
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="profileForm.realName"></el-input>
        </el-form-item>
        
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="profileForm.idCard"></el-input>
        </el-form-item>
        
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="profileForm.phone"></el-input>
        </el-form-item>
        
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="profileForm.email"></el-input>
        </el-form-item>
        
        <el-form-item label="参赛类型" prop="contestType">
          <el-select v-model="profileForm.contestType" placeholder="请选择参赛类型">
            <el-option label="手机摄影" value="mobile"></el-option>
            <el-option label="相机摄影" value="camera"></el-option>
            <el-option label="两者都参加" value="both"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="个人简介" prop="bio">
          <el-input type="textarea" v-model="profileForm.bio" rows="4"></el-input>
        </el-form-item>
        
        <el-form-item v-if="editMode">
          <el-button type="primary" @click="updateProfile">保存修改</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="status-card">
      <div slot="header" class="card-header">
        <span>参赛状态</span>
      </div>
      
      <div class="status-info">
        <p><strong>审核状态：</strong> 
          <el-tag :type="statusType">{{ statusText }}</el-tag>
        </p>
        <p v-if="contestant.reviewComment"><strong>审核意见：</strong> {{ contestant.reviewComment }}</p>
        <p><strong>注册时间：</strong> {{ formatDate(contestant.createdAt) }}</p>
        <p v-if="contestant.updatedAt"><strong>最后更新：</strong> {{ formatDate(contestant.updatedAt) }}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
import { formatDate } from '@/utils/date'

export default {
  name: 'ContestantProfile',
  data() {
    // 身份证验证规则
    const validateIdCard = (rule, value, callback) => {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (!reg.test(value)) {
        return callback(new Error('请输入正确的身份证号码'))
      }
      callback()
    }
    
    // 手机号验证规则
    const validatePhone = (rule, value, callback) => {
      const reg = /^1[3-9]\d{9}$/
      if (!reg.test(value)) {
        return callback(new Error('请输入正确的手机号码'))
      }
      callback()
    }
    
    return {
      editMode: false,
      contestant: {},
      profileForm: {
        username: '',
        realName: '',
        idCard: '',
        phone: '',
        email: '',
        contestType: '',
        bio: ''
      },
      rules: {
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { validator: validateIdCard, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        contestType: [
          { required: true, message: '请选择参赛类型', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    statusType() {
      const status = this.contestant.status
      if (!status) return ''
      
      const statusMap = {
        'pending': 'warning',
        'approved': 'success',
        'rejected': 'danger'
      }
      return statusMap[status] || 'info'
    },
    statusText() {
      const status = this.contestant.status
      if (!status) return '未知'
      
      const statusMap = {
        'pending': '审核中',
        'approved': '已通过',
        'rejected': '已拒绝'
      }
      return statusMap[status] || '未知'
    }
  },
  created() {
    this.fetchContestantInfo()
  },
  methods: {
    formatDate,
    fetchContestantInfo() {
      // 获取参赛者信息
      axios.get('/api/contestant/profile')
        .then(response => {
          this.contestant = response.data.data
          // 填充表单
          this.profileForm.username = this.contestant.username
          this.profileForm.realName = this.contestant.realName
          this.profileForm.idCard = this.contestant.idCard
          this.profileForm.phone = this.contestant.phone
          this.profileForm.email = this.contestant.email
          this.profileForm.contestType = this.contestant.contestType
          this.profileForm.bio = this.contestant.bio || ''
        })
        .catch(error => {
          this.$message.error('获取参赛者信息失败：' + (error.response?.data?.message || error.message))
        })
    },
    updateProfile() {
      this.$refs.profileForm.validate(valid => {
        if (valid) {
          axios.put('/api/contestant/profile', this.profileForm)
            .then(response => {
              this.$message.success('个人资料更新成功')
              this.editMode = false
              this.fetchContestantInfo() // 重新获取最新信息
            })
            .catch(error => {
              this.$message.error('更新失败：' + (error.response?.data?.message || error.message))
            })
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.$refs.profileForm.resetFields()
      // 重新填充表单
      this.profileForm.username = this.contestant.username
      this.profileForm.realName = this.contestant.realName
      this.profileForm.idCard = this.contestant.idCard
      this.profileForm.phone = this.contestant.phone
      this.profileForm.email = this.contestant.email
      this.profileForm.contestType = this.contestant.contestType
      this.profileForm.bio = this.contestant.bio || ''
    }
  }
}
</script>

<style scoped>
.contestant-profile {
  max-width: 900px;
  margin: 20px auto;
}

.profile-card, .status-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-info {
  line-height: 1.8;
}

.status-info p {
  margin: 10px 0;
}
</style> 